<template>
  <template v-if="syncToApp || syncToLocal">
    <ThirdAppDropdown v-if="enabledTypes.wechatEnterprise" type="wechatEnterprise" name="企微" v-bind="bindAttrs" v-on="bindEvents" />
    <ThirdAppDropdown v-if="enabledTypes.dingtalk" type="dingtalk" name="钉钉" v-bind="bindAttrs" v-on="bindEvents" />
  </template>
  <template v-else>未设置任何同步方向</template>
</template>

<script lang="ts" setup>
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { ref, computed, createVNode, h, resolveComponent } from 'vue';
import { defHttp } from '@/utils/http/axios';
import { backEndUrl, getEnabledTypes, doSyncThirdApp } from './ThirdApp.api';
import { Modal, Input } from 'ant-design-vue';
import ThirdAppDropdown from './ThirdAppDropdown.vue';
import { useMessage } from '@/hooks/web/useMessage';

const { createMessage, createWarningModal } = useMessage();
const props = defineProps({
  // 同步类型，可以是 user、depart
  bizType: {
    type: String,
    required: true,
  },
  // 是否允许同步到第三方APP
  syncToApp: Boolean,
  // 是否允许第三方APP同步到本地
  syncToLocal: Boolean,
  // 选择的行
  selectedRowKeys: Array,
});
// 声明Emits
const emit = defineEmits(['sync-ok', 'sync-error', 'sync-finally']);

const enabledTypes = ref({});
// 绑定属性
const bindAttrs = computed(() => {
  return {
    syncToApp: props.syncToApp,
    syncToLocal: props.syncToLocal,
  };
});
// 绑定方法
const bindEvents = computed(() => {
  return {
    'to-app': onToApp,
    'to-local': onToLocal,
  };
});

// 同步到第三方App
function onToApp(e) {
  doSync(e.type, '/toApp');
}

// 同步到本地
function onToLocal(e) {
  doSync(e.type, '/toLocal');
}

// 获取启用的第三方App
async function loadEnabledTypes() {
  enabledTypes.value = await getEnabledTypes();
}

// 开始同步第三方App
function doSync(type, direction) {
  let urls = backEndUrl[type];
  if (!(urls && urls[props.bizType])) {
    console.warn('配置出错');
    return;
  }
  let url = urls[props.bizType] + direction;
  let selectedRowKeys = props.selectedRowKeys;
  let content = '确定要开始同步全部数据吗？可能花费较长时间！';

  if (Array.isArray(selectedRowKeys) && selectedRowKeys.length > 0) {
    content = `确定要开始同步这 ${selectedRowKeys.length} 项吗？`;
  } else {
    selectedRowKeys = [];
  }
  return new Promise((resolve, reject) => {
    const model = Modal.confirm({
      icon: createVNode(ExclamationCircleOutlined),
      title: '同步',
      content,
      onOk: () => {
        model.update({
          keyboard: false,
          okText: '同步中…',
          cancelButtonProps: { disabled: true },
        });
        let params = { ids: selectedRowKeys.join(',') };
        return defHttp
          .get({ url, params }, { isTransformResponse: false })
          .then(res => {
            let options = {};
            if (res.result) {
              options = {
                width: 600,
                title: res.message,
                content: () => {
                  let nodes;
                  let successInfo = [
                    `成功信息如下：`,
                    renderTextarea(h, res.result.successInfo.map((v, i) => `${i + 1}. ${v}`).join('\n')),
                  ];
                  if (res.success) {
                    nodes = [...successInfo, h('br'), `无失败信息！`];
                  } else {
                    nodes = [
                      `失败信息如下：`,
                      renderTextarea(h, res.result.failInfo.map((v, i) => `${i + 1}. ${v}`).join('\n')),
                      h('br'),
                      ...successInfo,
                    ];
                  }
                  return nodes;
                },
              };
            }
            if (res.success) {
              if (options != null) {
                Modal.success(options);
              } else {
                createMessage.warning(res.message);
              }
              emit('sync-ok');
            } else {
              if (options != null) {
                Modal.warning(options);
              } else {
                createMessage.warning(res.message);
              }
              emit('sync-error');
            }
          })
          .catch(() => model.destroy())
          .finally(() => {
            resolve();
            emit('sync-finally', {
              type,
              direction,
              isToApp: direction === '/toApp',
              isToLocal: direction === '/toLocal',
            });
          });
      },
      onCancel() {
        resolve();
      },
    });
  });
}

function renderTextarea(h, value) {
  return h(
    'div',
    {
      id: 'box',
      style: {
        minHeight: '100px',
        border: '1px solid #d9d9d9',
        fontSize: '14px',
        maxHeight: '250px',
        whiteSpace: 'pre',
        overflow: 'auto',
        padding: '10px',
      },
    },
    value
  );
}

// 获取启用的第三方App
loadEnabledTypes();
</script>

<style scoped>
#box:hover {
  border-color: #40a9ff;
}
</style>
